<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-切换状态</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <div id="demo">
        <div class="container">
            <h3>案例-切换状态</h3>
            <hr>

            <div class="jumbotron">
                <!-- <span>{{ num }}</span> -->
                <h2>今天天气很 {{ flag ? '凉爽' : '炎热' }}</h2>
                <br />
                <!-- 在dom中任何地方使用data中的数据时，都不需要加this -->
                <!-- <span class="btn btn-primary" @click="flag = !flag; num++">切换状态</span> -->
                <span class="btn btn-primary" @click="flag = !flag">切换状态</span>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {
                // info1: '晚安，玛卡巴卡！',
                // info2: '早上好，德玛西亚！',
                flag: true,
                num: 0,
            },
            // 事件和方法
            // methods: {
            //     fn() {
            //         this.flag = !this.flag
            //     }
            // }
        })
    </script>
</body>
</html>